<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公告信息</title>
    <script src="./js/jquery-3.6.0.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./CSS/bootstrap.min.css">

    <script src="./js/fxx.js"></script>
    <link rel="stylesheet" href="./CSS/fxx_GGXX.css">

    


<style type="text/css">
  * {
    margin: 0;
    padding: 0;
  }
  
  ul li {
    list-style: none;
    float: left;
    margin-left: 60px;
    line-height: 60px;
  }
  
  a {
    text-decoration: none;
    color: rgb(229, 35, 61);
  }
  
  ul li a:hover {
    color: orange;
    text-decoration: none;
  }
  .ok{
    height: 36px;
     background-color: #863c13;
  }
  .j{
    
          font-size: 20px;
    float: left;
     margin-left:500px;
      height: 36px;
  }
  .center{
    width: 1200px;
          height: 36px;
          margin: 0 auto;
          line-height: 36px;
  }
  .hhh{
    color: rgb(236, 242, 232);
           font-size: 19px;
     line-height: 35px;
             float: right;
  }
  .hhh a{
    color: #f4ecec;
            margin: 0 5px;
             font-size: 18px;
  }

</style>
</head>
<body>
  <div class="container-fluid px-0">
    <div class="ok">
        <div class="center">
            <div class="j" style="color: rgb(230, 237, 237);">
                <b>校园失物招领系统</b>


            </div>
            <div class="hhh">

                <a href="denglu.html">登录</a>
                <a href="zhuce.html">免费注册</a>
                <a href="#">购物车</a>
                <a href="#">我的订单</a>

            </div>

        </div>
    </div>

    <div class="w-100  d-flex justify-content-center"
        style="height: 60px;background-color:#1d1d22;min-width: 800px;">
        <div class="" style="color: white;">
            <ul class="">
                <li>
                    <a href="gui.html">首页</a>
                </li>
                <li>
                    <a href="fxx_GGXX.html">公告信息</a>
                </li>
                <li>
                    <a href="shiwu1.html">失物信息</a>
                </li>
                <li>
                    <a href="zhaoling1.html">招领信息</a>
                </li>
                <li>
                    <a href="forum.html">交流论坛</a>
                </li>
                <li>
                    <a href="demo00.html">留言反馈</a>
                </li>
                <li>
                    <a href="personal.html">个人中心</a>
                </li>
                <li>
                    <a href="./后台/index.html">后台管理</a>
                </li>

            </ul>

        </div>

    </div>
</div>
    <div id="F_main">
        <div class="zhanshi_0 w-100"style="">
        <!-- TOP 面包屑导航 -->
            <nav aria-label="breadcrumb" style="margin-bottom: 2px!important;box-shadow: 0px 2px 0px pink;">
                <ol class="breadcrumb" style="margin-bottom: 2px!important;">
                  <li class="breadcrumb-item"><a href="#">首页</a></li>

            <!-- 需要数据库支持同步 标题名 -->
                  <li class="breadcrumb-item active" aria-current="page">公告标题1</li>
                  <!-- <button type="button" class="btn sc" style="position: relative;left:900px; background-color: #7f4e16;color: white;">☆点我收藏</button> -->
            
                </ol>
              </nav>
        <!-- 面包屑end -->
        
        <!-- 主要内容（左图 右信息） -->
        <div class="card mb-3" style="max-width: 100%; height: 600px;">
            <div class="row no-gutters" style="max-width: 100%;height: 100%;">
                <div class="col-md-5">
                    <img src="./img/300.jpg"  alt="..." style="box-shadow: 5px 3px 9px #7f4e16;width: 116%; margin-bottom: 20px;height: 98%;">
                </div>

                <div class="col-md-6" style="margin-left:8.3333333%;">
                    <div class="body_BT py-2 px-4" style="color:white; background-color: #7f4e16;">
                        <h5>公告标题1</h5>
                    </div>

                    <!-- 信息模板 -->
                    <div class="card-body row" style="box-shadow: 0px 2px 0px #ba787a; margin: 3px 0!important;">
                        <h5 class="card-title col-4">类型:</h5>
                        <p>类型1</p>
                    </div>
                    <div class="card-body row" style="box-shadow: 0px 2px 0px #ba787a; margin: 3px 0!important;">
                        <h5 class="card-title col-4">类型:发布日期:</h5>
                        <p>类型1</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 内容、评论区 -->
        <div class="card">
            <!-- 分页选项卡  -->
            <div class="card-header">
              <ul class="nav nav-pills card-header-pills">
                <li class="nav-item">
                  <a class="nav-link active" data-toggle="pill"  data-target="#nr">内容</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" data-toggle="pill" data-target="#pl">评论</a>
                </li>
              </ul>
            </div>

            <!-- 下面的具体的内容/评论区域 -->
            <div class="tab-content">
              <!-- 内容区域 -->
              <div class="card-body tab-pane active" id="nr" style="min-height: 200px;">
                <h5 class="card-title">
                  这是内容区域
                </h5>
              </div>

              <!-- 评论区域 -->
              <div class="card-body tab-pane fade" id="pl">
                <div class="input-group mb-3" >
                  <div class="input-group-prepend">
                    <span class="input-group-text">编辑发送</span>
                  </div>
                  <textarea class="form-control" aria-label="With textarea" cols="40" rows="6"></textarea>
                </div>
                <div style="margin-left: 45%;">
                  <button type="button" class="btn" style="background-color: #7f4e16;color: white;">立刻提交</button>
                  <button type="button" class="btn" style="background-color: #454545;color: white;">重置</button>
                </div>
              </div>
            </div>
          </div>
          

    </div>
</body>
<script>

  let sc=document.getElementsByClassName("sc");
  sc.onclick=function(){
    sc.innerHTML="★点我收藏";
    console.log(sc.value);
  }
  


</script>
</html>